<template>
  <div class="container">
    <!--工具简介-->
    <div
      class="tools-intro"
      :style="{
        backgroundImage: 'url(' + require('../assets/banner-tools.png') + ')',
      }"
      style="background-size: 100% 100%"
    >
      <div style="width: 1600px; align-items: center; margin: 0 auto">
        <el-image
          style="width: 100px; height: 100px; float: left"
          :src="require('@/assets/icon/encryption.svg')"
        ></el-image>
        <div style="position: relative; left: 40px">
          <p style="font-size: 25px; font-weight: 600">加密/解密工具</p>
          <p>加密/解密功能采用crypto-js插件实现</p>
        </div>
      </div>
    </div>

    <div style="width: 1600px; margin: 40px auto">
      <h3>操作区</h3>
      <el-button @click="encryption" type="primary">加密 &gt;</el-button>
      <el-button @click="decrypt" type="success" style="margin-right: 30px;">解密 &lt;</el-button>
      密钥：<el-input class="keyInput" v-model="secretKey" placeholder="请输入密钥" style="width: 160px;">  </el-input>
    </div>

    <!--代码框-->
    <div style="width: 1600px; display: flex; justify-content: space-between">
      <div style="width: 49%">
        <h3>明文</h3>
        <el-input
          v-model="encryptionText"
          type="textarea"
          :rows="20"
        ></el-input>
      </div>

      <div style="width: 49%">
        <h3>密文</h3>
        <el-input v-model="decryptText" type="textarea" :rows="20"></el-input>
      </div>
    </div>

    <div style="position: absolute; bottom: 0">
      <p>工具库 由 OSREDM.COM 所有</p>
    </div>
  </div>
</template>

<script>
import CryptoJS from "crypto-js";

export default {
  name: "EncryptionTool",
  data() {
    return {
      encryptionText: "", // 加密文本
      decryptText: "", // 解密文本
      secretKey: "", // 自己定义密钥
    };
  },
  methods: {
    // 加密
    encryption() {
      if(!this.secretKey){
        this.$message({
          showClose: true,
          message: '密钥不能为空！',
          type: 'warning'
        });
      } else {
        this.decryptText = CryptoJS.AES.encrypt(
        this.encryptionText,
        this.secretKey
      ).toString();
      }
    },
    // 解密
    decrypt() {
      if(!this.secretKey){
        this.$message({
          showClose: true,
          message: '密钥不能为空！',
          type: 'warning'
        });
      } else {
        const bytes = CryptoJS.AES.decrypt(this.decryptText, this.secretKey);
        this.encryptionText = bytes.toString(CryptoJS.enc.Utf8);
      }
    },
  },
};
</script>

<style scoped>
.container {
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #fafcff;
  height: 100%;
}

.tools-intro {
  width: 100%;
  height: 200px;
  box-shadow: 0px 0px 40px 0px rgb(217, 224, 234);
}

::v-deep .el-textarea__inner {
  font-family: sans-serif !important;
}

::v-deep .el-button.el-button--primary {
  background: #4154f1;
}

::v-deep .el-button.el-button--success {
  background: #28bd6c;
}


/* .keyInputDiv {
  width: 200px;
  height: 40px;
  display: flex;
}

.keyInputDiv .keyName {
  width: 100px;
  height: 100%;
}

.keyInputDiv .keyInput {
  width: 160px;
} */



</style>
